<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>聊天框</title>
    <!-- 设置样式 -->
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

        .chat-box {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            padding: 20px;
            overflow-y: scroll;
            scroll-behavior: smooth;
        }

        .message {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            max-width: 60%;
            margin: 10px;
            padding: 10px;
            border-radius: 5px;
            background-color: #fff;
        }

        .message.sent {
            align-items: flex-end;
            background-color: #dcf8c6;
        }

        .message.text {
            font-size: 16px;
            color: #333;
            word-wrap: break-word;
            margin-top: 5px;
        }

        .message.timestamp {
            font-size: 12px;
            color: #999;
            align-self: flex-end;
            margin-top: 5px;
        }

        .input-box {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #fff;
        }

        .input-box input[type="text"] {
            flex-grow: 1;
            margin-right: 10px;
            padding: 5px;
            border-radius: 5px;
            border: none;
            outline: none;
            box-shadow: 0 0 2px #ccc;
        }

        .input-box button {
            padding: 5px 10px;
            border-radius: 5px;
            border: none;
            background-color: #09f;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .input-box button:hover {
            background-color: #0077cc;
        }

        .container {
            width: 80%;
            /* 设置聊天框的宽度为页面宽度的40% */
            height: 800px;
            /* 设置聊天框的高度为400像素 */
            display: flex;
            overflow-y: scroll;
            /* justify-content: center; */
            /* 添加此行，使聊天框水平居中 */
            /* align-items: center; */
            /* 添加此行，使聊天框垂直居中 */
            /* height: 100vh; */
            /* width: 100vw; */
            background-color: #f2f2f2;
            /* font-family: Arial, sans-serif; */
        }


        .message.text {
            font-size: 14px;
            /* 将消息文本字体缩小为14像素 */
            color: #333;
            word-wrap: break-word;
            margin-top: 5px;
        }
    </style>
</head>

<body>
<!-- 聊天框主体 -->
<div class="container" id="container">
    <div class="chat-box" id="chat-box"></div>
    <!-- 输入框 -->
    <div class="input-box">
        <input type="text" id="message-input" placeholder="请输入消息...">
        <button id="send-btn">发送</button>
    </div>
</div>

<!-- JavaScript代码 -->
<script>
    // 获取聊天框、输入框和发送按钮元素
    const chatBox = document.getElementById('chat-box');
    const messageInput = document.getElementById('message-input');
    const sendBtn = document.getElementById('send-btn');

    let timestamp = Date.now();

    // 给发送按钮添加点击事件监听器，调用sendMessage函数
    sendBtn.addEventListener('click', sendMessage);
    // 给输入框添加按键按下事件监听器，如果按下的是Enter键，则调用sendMessage函数
    messageInput.addEventListener('keydown', (event) => {
        if (event.keyCode === 13) {
            sendMessage();
        }
    });
    $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);

    // 发送消息函数
    function sendMessage() {
        const message = messageInput.value; // 获取输入框中的文本
        if (message.trim() === '') { // 如果文本为空，则返回
            return;
        }
        messageInput.value = ''; // 清空输入框中的文本
        const sentMessage = createMessage(message, true); // 创建发送的消息元素
        chatBox.appendChild(sentMessage); // 将发送的消息元素添加到聊天框中
        // 发送消息到服务器，并在消息返回后创建接收的消息元素添加到聊天框中
        sendMessageToServer(message).then(response => {
            if (response.message === 'success') {
                const receivedMessage = createMessage(response.data, false);
                chatBox.appendChild(receivedMessage);
            } else {
                alert('系统出现异常');
            }
        }).catch(error => {
            console.error(error);
            alert('发送消息失败');
        });
    }

    // 创建消息元素函数，参数text表示消息文本，isSent表示是否为发送的消息
    function createMessage(text, isSent) {
        const messageContainer = document.createElement('div'); // 创建消息容器元素
        messageContainer.classList.add('message'); // 添加CSS类
        if (isSent) { // 如果是发送的消息，添加CSS类
            messageContainer.classList.add('sent');
        }
        const textElement = document.createElement('div'); // 创建文本元素
        textElement.classList.add('text'); // 添加CSS类
        textElement.innerText = text; // 设置文本内容
        messageContainer.appendChild(textElement); // 添加文本元素到消息容器中
        const timestampElement = document.createElement('div'); // 创建时间戳元素
        timestampElement.classList.add('timestamp'); // 添加CSS类
        timestampElement.innerText = new Date().toLocaleString(); // 设置时间戳内容为当前时间
        messageContainer.appendChild(timestampElement); // 添加时间戳元素到消息容器中
        return messageContainer; // 返回消息容器元素
    }

    // 发送消息到服务器函数，参数message表示要发送的消息文本
    function sendMessageToServer(message, timeout = 5000) {
        const data = {
            "messages": message,
            "dialogue_id": timestamp,
            "user_account": "gh"
        }; // 构造请求数据

        // 发送POST请求，请求体为JSON格式的data数据
        const request = fetch('http://101.42.48.35/xiezhewan/chat/gpt/dialogue', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        // 超时限制
        const timeoutPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject(new Error('Request timeout'));
            }, timeout);
        });

        // 返回Promise对象，解析响应体为JSON格式的数据
        return Promise.race([request, timeoutPromise]).then(response => response.json());
    }
</script>
</body>

</html>